<template>
  <div class="div">
    胡歌
    <!--  父传子通信： 2.在子组件添加动态属性 -->
   <!-- 子传父 2.提供对应函数 -->
    <Props :titls="names" @start="show"></Props>
  </div>
</template>

<script>
import Props from "./components/Props.vue";
export default {
  data() {
    return {
      // 父传子通信： 1.在data里面设置属性
      names: "彭于晏",
    };
  },
  components: {
   Props,
  },
    

  methods:{
    // 子传父 3.获取 
    show(newvalue){
      console.log(newvalue);
    // 把this.names修改为韩立
      this.names=newvalue
    }
  }
}
</script>

<style>
.div {
  width: 400px;
  height: 100px;
  line-height: 40px;
  border: 3px solid black;
  font-size: 1rem;
  margin: 0 auto;
  text-align: center;
}
</style>